<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>商品列表 | 社交商城</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #4F46E5;
      --secondary: #6B7280;
      --light: #F9FAFB;
      --dark: #1F2937;
      --white: #FFFFFF;
      --border: #E5E7EB;
      --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
      --radius: 8px;
      
      /* 不同风格主题色 */
      --style1: #3B82F6; /* 科技蓝 */
      --style2: #EC4899; /* 活力粉 */
      --style3: #10B981; /* 生态绿 */
      --style4: #F59E0B; /* 温暖橙 */
      --style5: #8B5CF6; /* 梦幻紫 */
      --style6: #111827; /* 商务黑 */
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f5f5;
      color: var(--dark);
      min-height: 100vh;
      padding: 0;
      margin: 0;
      transition: background-color 0.3s ease;
    }
    
    .container {
      max-width: 420px;
      margin: 0 auto;
      background-color: var(--white);
      min-height: 100vh;
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
      transition: background-color 0.3s ease;
    }
    
    /* 商品列表页面容器 */
    .products-page {
      display: none;
      min-height: 100vh;
      flex-direction: column;
    }
    
    .products-page.active {
      display: flex;
      animation: fadeIn 0.3s ease forwards;
    }
    
    /* 顶部导航栏 */
    .page-header {
      padding: 18px 20px;
      position: relative;
      text-align: center;
      border-bottom: 1px solid var(--border);
      background-color: var(--white);
      transition: all 0.3s ease;
      z-index: 10;
    }
    
    .page-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .header-actions {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      gap: 15px;
    }
    
    .header-btn {
      background: none;
      border: none;
      color: var(--dark);
      font-size: 20px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    
    .header-btn:active {
      transform: scale(0.9);
    }
    
    /* 搜索栏 */
    .search-bar {
      padding: 12px 16px;
      background-color: var(--light);
      position: relative;
    }
    
    .search-input {
      width: 100%;
      padding: 10px 16px 10px 40px;
      border-radius: 30px;
      border: 1px solid var(--border);
      background-color: var(--white);
      font-size: 14px;
      transition: all 0.2s ease;
    }
    
    .search-input:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
    }
    
    .search-icon {
      position: absolute;
      left: 30px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--secondary);
    }
    
    /* 分类标签 */
    .category-tabs {
      display: flex;
      overflow-x: auto;
      padding: 10px 16px;
      gap: 12px;
      border-bottom: 1px solid var(--border);
      background-color: var(--white);
    }
    
    .category-tab {
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      white-space: nowrap;
      cursor: pointer;
      transition: all 0.2s ease;
      background-color: var(--light);
      color: var(--secondary);
    }
    
    .category-tab.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 商品列表容器 */
    .content-container {
      flex-grow: 1;
      overflow-y: auto;
    }
    
    /* 网格布局商品列表 */
    .products-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      padding: 12px;
    }
    
    /* 列表布局商品列表 */
    .products-list {
      padding: 8px;
    }
    
    /* 商品卡片 - 网格视图 */
    .product-card {
      background-color: var(--white);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      transition: all 0.3s ease;
    }
    
    .product-image {
      aspect-ratio: 1/1;
      background-size: cover;
      background-position: center;
      position: relative;
    }
    
    .product-badge {
      position: absolute;
      top: 6px;
      left: 6px;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 500;
      color: white;
      background-color: var(--primary);
    }
    
    .product-favorite {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.9);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--secondary);
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    
    .product-favorite.active {
      color: #EF4444;
    }
    
    .product-info {
      padding: 8px 10px;
    }
    
    .product-name {
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 4px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 1.3;
    }
    
    .product-price {
      font-size: 15px;
      font-weight: 600;
      color: var(--primary);
      margin-bottom: 4px;
    }
    
    .product-rating {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: var(--secondary);
    }
    
    .rating-stars {
      color: #F59E0B;
      margin-right: 4px;
    }
    
    /* 商品卡片 - 列表视图 */
    .product-list-item {
      display: flex;
      gap: 12px;
      background-color: var(--white);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      margin-bottom: 10px;
      transition: all 0.3s ease;
    }
    
    .product-list-image {
      width: 100px;
      flex-shrink: 0;
      background-size: cover;
      background-position: center;
    }
    
    .product-list-info {
      flex-grow: 1;
      padding: 12px 0;
      display: flex;
      flex-direction: column;
    }
    
    .product-list-name {
      font-size: 15px;
      font-weight: 500;
      margin-bottom: 6px;
    }
    
    .product-list-desc {
      font-size: 13px;
      color: var(--secondary);
      margin-bottom: 8px;
      flex-grow: 1;
    }
    
    .product-list-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .product-list-price {
      font-size: 16px;
      font-weight: 600;
      color: var(--primary);
    }
    
    .product-list-action {
      padding: 6px 14px;
      border-radius: 4px;
      background-color: var(--primary);
      color: white;
      font-size: 13px;
      border: none;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    
    /* 视图切换按钮 */
    .view-toggle {
      position: fixed;
      bottom: 80px;
      right: 20px;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background-color: var(--primary);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: var(--shadow);
      border: none;
      font-size: 18px;
      cursor: pointer;
      z-index: 1000;
      transition: all 0.3s ease;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1010;
      background-color: white;
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
      width: 180px;
      transition: all 0.3s ease;
      transform: translateX(0);
      opacity: 1;
    }
    
    .style-switcher.hidden {
      transform: translateX(200px);
      opacity: 0;
      pointer-events: none;
    }
    
    .switcher-toggle {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1020;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: var(--primary);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: var(--shadow);
      border: none;
      font-size: 18px;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .switcher-header {
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .switcher-close {
      background: none;
      border: none;
      color: var(--secondary);
      font-size: 16px;
      cursor: pointer;
    }
    
    .switcher-option {
      padding: 12px 16px;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.2s;
      display: flex;
      align-items: center;
    }
    
    .switcher-color {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      margin-right: 10px;
    }
    
    .switcher-option:hover {
      background-color: #f9f9f9;
    }
    
    .switcher-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 底部导航栏 */
    .bottom-nav {
      display: flex;
      padding: 8px 0;
      border-top: 1px solid var(--border);
      background-color: var(--white);
    }
    
    .nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: var(--secondary);
      text-decoration: none;
      font-size: 11px;
      gap: 4px;
      transition: all 0.2s ease;
    }
    
    .nav-item i {
      font-size: 20px;
    }
    
    .nav-item.active {
      color: var(--primary);
    }
    
    /* 风格1：科技蓝 */
    .style-1 {
      --primary: var(--style1);
    }
    
    .style-1 .product-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    }
    
    /* 风格2：活力粉 */
    .style-2 {
      --primary: var(--style2);
    }
    
    .style-2 .page-header,
    .style-2 .bottom-nav {
      background-color: var(--primary);
      color: white;
      border-color: rgba(255, 255, 255, 0.2);
    }
    
    .style-2 .header-btn,
    .style-2 .page-title {
      color: white;
    }
    
    .style-2 .nav-item {
      color: rgba(255, 255, 255, 0.7);
    }
    
    .style-2 .nav-item.active {
      color: white;
    }
    
    .style-2 .product-card {
      border-radius: 12px;
    }
    
    /* 风格3：生态绿 */
    .style-3 {
      --primary: var(--style3);
    }
    
    .style-3 .container {
      background-color: #F8FAFC;
    }
    
    .style-3 .product-card {
      background-color: var(--white);
      border: 1px solid rgba(0, 0, 0, 0.05);
    }
    
    .style-3 .search-bar {
      background-color: var(--white);
      border-bottom: 1px solid var(--border);
    }
    
    /* 风格4：温暖橙 */
    .style-4 {
      --primary: var(--style4);
    }
    
    .style-4 .product-price {
      font-weight: 700;
    }
    
    .style-4 .category-tabs {
      background-color: var(--light);
    }
    
    .style-4 .product-card {
      border: 1px solid rgba(0, 0, 0, 0.08);
    }
    
    .style-4 .product-badge {
      background-color: #EF4444;
    }
    
    /* 风格5：梦幻紫 */
    .style-5 {
      --primary: var(--style5);
    }
    
    .style-5 .container {
      background-color: #FCFAFF;
    }
    
    .style-5 .products-grid {
      gap: 16px;
      padding: 16px;
    }
    
    .style-5 .product-card {
      border-radius: 16px;
      box-shadow: 0 2px 8px rgba(139, 92, 246, 0.1);
    }
    
    .style-5 .product-info {
      padding: 10px 12px;
    }
    
    /* 风格6：商务黑 */
    .style-6 {
      --primary: #60A5FA;
      --secondary: #9CA3AF;
      --light: #1F2937;
      --dark: #F9FAFB;
      --white: #111827;
      --border: #374151;
      --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    }
    
    .style-6 body {
      background-color: #030712;
    }
    
    .style-6 .container {
      background-color: var(--white);
    }
    
    .style-6 .page-header,
    .style-6 .bottom-nav,
    .style-6 .search-bar,
    .style-6 .category-tabs {
      background-color: var(--light);
      border-bottom-color: var(--border);
    }
    
    .style-6 .header-btn,
    .style-6 .page-title,
    .style-6 .nav-item,
    .style-6 .search-input,
    .style-6 .category-tab {
      color: var(--dark);
    }
    
    .style-6 .search-input {
      background-color: var(--white);
      border-color: var(--border);
    }
    
    .style-6 .product-card,
    .style-6 .product-list-item {
      background-color: var(--light);
    }
    
    .style-6 .style-switcher {
      background-color: var(--light);
    }
    
    .style-6 .switcher-header {
      border-bottom-color: var(--border);
      color: var(--dark);
    }
    
    .style-6 .switcher-option {
      color: var(--dark);
    }
    
    .style-6 .switcher-option:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
    
    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    /* 响应式调整 */
    @media (max-width: 360px) {
      .product-name {
        font-size: 13px;
      }
      
      .product-price {
        font-size: 14px;
      }
    }
  </style>
</head>
<body class="style-1">
  <!-- 样式切换器 -->
  <button class="switcher-toggle">
    <i class="fa fa-paint-brush"></i>
  </button>
  
  <div class="style-switcher hidden">
    <div class="switcher-header">
      选择页面样式
      <button class="switcher-close"><i class="fa fa-times"></i></button>
    </div>
    <div class="switcher-option active" data-style="1">
      <span class="switcher-color" style="background-color: var(--style1);"></span>
      科技蓝
    </div>
    <div class="switcher-option" data-style="2">
      <span class="switcher-color" style="background-color: var(--style2);"></span>
      活力粉
    </div>
    <div class="switcher-option" data-style="3">
      <span class="switcher-color" style="background-color: var(--style3);"></span>
      生态绿
    </div>
    <div class="switcher-option" data-style="4">
      <span class="switcher-color" style="background-color: var(--style4);"></span>
      温暖橙
    </div>
    <div class="switcher-option" data-style="5">
      <span class="switcher-color" style="background-color: var(--style5);"></span>
      梦幻紫
    </div>
    <div class="switcher-option" data-style="6">
      <span class="switcher-color" style="background-color: var(--style6);"></span>
      商务黑
    </div>
  </div>
  
  <!-- 视图切换按钮 -->
  <button class="view-toggle" id="viewToggle">
    <i class="fa fa-th-list"></i>
  </button>
  
  <div class="container">
    <!-- 风格1：科技蓝商品列表 -->
    <div class="products-page active" id="products1">
      <div class="page-header">
        <h1 class="page-title">精选商品</h1>
        <div class="header-actions">
          <button class="header-btn" id="filter1"><i class="fa fa-filter"></i></button>
          <button class="header-btn" id="cart1"><i class="fa fa-shopping-cart"></i></button>
        </div>
      </div>
      
      <div class="search-bar">
        <i class="fa fa-search search-icon"></i>
        <input type="text" class="search-input" placeholder="搜索商品...">
      </div>
      
      <div class="category-tabs">
        <div class="category-tab active">全部</div>
        <div class="category-tab">电子产品</div>
        <div class="category-tab">服装鞋帽</div>
        <div class="category-tab">家居用品</div>
        <div class="category-tab">美妆个护</div>
        <div class="category-tab">食品饮料</div>
      </div>
      
      <div class="content-container">
        <!-- 网格视图商品列表 -->
        <div class="products-view active" id="gridView1">
          <div class="products-grid">
            <div class="product-card">
              <div class="product-image" style="background-image: url('https://picsum.photos/id/96/400/400');">
                <div class="product-badge">热销</div>
                <div class="product-favorite"><i class="fa fa-heart-o"></i></div>
              </div>
              <div class="product-info">
                <div class="product-name">无线蓝牙耳机 主动降噪降噪长续航</div>
                <div class="product-price">¥299</div>
                <div class="product-rating">
                  <span class="rating-stars"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-half-o"></i></span>
                  <span>4.5 (128)</span>
                </div>
              </div>
            </div>
            
            <div class="product-card">
              <div class="product-image" style="background-image: url('https://picsum.photos/id/26/400/400');">
                <div class="product-favorite"><i class="fa fa-heart-o"></i></div>
              </div>
              <div class="product-info">
                <div class="product-name">纯棉短袖T恤 夏季新款</div>
                <div class="product-price">¥89</div>
                <div class="product-rating">
                  <span class="rating-stars"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-o"></i></span>
                  <span>4.0 (96)</span>
                </div>
              </div>
            </div>
            
            <div class="product-card">
              <div class="product-image" style="background-image: url('https://picsum.photos/id/20/400/400');">
                <div class="product-badge">新品</div>
                <div class="product-favorite"><i class="fa fa-heart-o"></i></div>
              </div>
              <div class="product-info">
                <div class="product-name">智能手表 心率监测 运动计步</div>
                <div class="product-price">¥399</div>
                <div class="product-rating">
                  <span class="rating-stars"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></span>
                  <span>5.0 (42)</span>
                </div>
              </div>
            </div>
            
            <div class="product-card">
              <div class="product-image" style="background-image: url('https://picsum.photos/id/119/400/400');">
                <div class="product-badge">优惠</div>
                <div class="product-favorite"><i class="fa fa-heart-o"></i></div>
              </div>
              <div class="product-info">
                <div class="product-name">北欧风简约台灯 卧室床头灯</div>
                <div class="product-price">¥129</div>
                <div class="product-rating">
                  <span class="rating-stars"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star-o"></i></span>
                  <span>3.5 (78)</span>
                </div>
              </div>
            </div>
            
            <div class="product-card">
              <div class="product-image" style="background-image: url('https://picsum.photos/id/99/400/400');">
                <div class="product-favorite"><i class="fa fa-heart-o"></i></div>
              </div>
              <div class="product-info">
                <div class="product-name">天然植物保湿面霜 敏感肌适用</div>
                <div class="product-price">¥159</div>
                <div class="product-rating">
                  <span class="rating-stars"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-o"></i></span>
                  <span>4.2 (156)</span>
                </div>
              </div>
            </div>
            
            <div class="product-card">
              <div class="product-image" style="background-image: url('https://picsum.photos/id/292/400/400');">
                <div class="product-badge">热销</div>
                <div class="product-favorite"><i class="fa fa-heart-o"></i></div>
              </div>
              <div class="product-info">
                <div class="product-name">进口零食大礼包 混合口味</div>
                <div class="product-price">¥69</div>
                <div class="product-rating">
                  <span class="rating-stars"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-half-o"></i></span>
                  <span>4.7 (215)</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 列表视图商品列表 -->
        <div class="product-view" id="listView1" style="display: none;">
          <div class="products-list">
            <div class="product-list-item">
              <div class="product-list-image" style="background-image: url('https://picsum.photos/id/96/400/400');"></div>
              <div class="product-list-info">
                <div class="product-list-name">无线蓝牙耳机 主动降噪长续航</div>
                <div class="product-list-desc">高清通话，IPX7防水，30小时续航，触控操作，多种颜色可选</div>
                <div class="product-list-footer">
                  <div class="product-list-price">¥299</div>
                  <button class="product-list-action">加入购物车</button>
                </div>
              </div>
            </div>
            
            <div class="product-list-item">
              <div class="product-list-image" style="background-image: url('https://picsum.photos/id/26/400/400');"></div>
              <div class="product-list-info">
                <div class="product-list-name">纯棉短袖T恤 夏季新款</div>
                <div class="product-list-desc">100%纯棉材质，透气气舒适，多种种尺码，多色可选，休闲百搭</div>
                <div class="product-list-footer">
                  <div class="product-list-price">¥89</div>
                  <button class="product-list-action">加入购物车</button>
                </div>
              </div>
            </div>
            
            <div class="product-list-item">
              <div class="product-list-image" style="background-image: url('https://picsum.photos/id/20/400/400');"></div>
              <div class="product-list-info">
                <div class="product-list-name">智能手表 心率监测 运动计步</div>
                <div class="product-list-desc">24小时心率监测测，多运动模式，睡眠监测
，消息提醒，长续航</div>
                <div class="product-list-footer">
                  <div class="product-list-price">¥399</div>
                  <button class="product-list-action">加入购物车</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="bottom-nav">
        <a href="#" class="nav-item">
          <i class="fa fa-home"></i>
          <span>首页</span>
        </a>
        <a href="#" class="nav-item active">
          <i class="fa fa-shopping-bag"></i>
          <span>商品</span>
        </a>
        <a href="#" class="nav-item">
          <i class="fa fa-plus-square-o"></i>
          <span>发布</span>
        </a>
        <a href="#" class="nav-item">
          <i class="fa fa fa-bell-o"></i>
          <span>通知</span>
        </a>
        <a href="#" class="nav-item">
          <i class="fa fa-user-o"></i>
          <span>我的</span>
        </a>
      </div>
    </div>
    
    <!-- 风格2：活力粉商品列表 -->
    <div class="products-page" id="products2">
      <div class="page-header">
        <h1 class="page-title">精选商品</h1>
        <div class="header-actions">
          <button class="header-btn" id="filter2"><i class="fa fa-filter"></i></button>
          <button class="header-btn" id="cart2"><i class="fa fa-shopping-cart"></i></button>
        </div>
      </div>
      
      <div class="search-bar">
        <i class="fa fa-search search-icon"></i>
        <input type="text" class="search-input" placeholder="搜索商品...">
      </div>
      
      <div class="category-tabs">
        <div class="category-tab active">全部</div>
        <div class="category-tab">女装</div>
        <div class="category-tab">美妆</div>
        <div class="category-tab">配饰</div>
        <div class="category-tab">包包</div>
        <div class="category-tab">鞋靴</div>
      </div>
      
      <div class="content-container">
        <!-- 网格视图图商品列表 -->
        <div class="product-view active" id="gridView2">
          <div class="products-grid">
            <div class="product-card">
              <div class="product-image" style="background-image: url('https://picsum.photos/id/64/400/400');">
                <div class="product-badge">热销</div>
                <div class="product-favorite"><i class="fa fa-heart-o"></i></div>
              </div>
              <div class="product-info">
                <div class="product-name">夏季碎花连衣裙 收腰显瘦</div>
                <div class="product-price">¥159</div>
                <div class="product-rating">
                  <span class="rating-stars"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-half-o"></i></span>
                  <span>4.6 (328)</span>
                </div>
              </div>
            </div>
            
            <div class="product-card">
              <div class="product-image" style="background-image: url('https://picsum.photos/id/21/400/400');">
                <div class="product-favorite"><i class="fa fa-heart-o"></i></div>
              </div>
              <div class="product-info">
                <div class="product-name">丝润口红套装 多色组合</div>
                <div class="product-price">¥199</div>
                <div class="product-rating">
                  <span class="rating-stars"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></span>
                  <span>4.9 (512)</span>
                </div>
              </div>
            </div>
            
            <div class="product-card">
              <div class="product-image" style="background-image: url('https://picsum.photos/id/152/400/400');">
                <div class="product-badge">新品</div>
                <div class="product-favorite"><i class="fa fa-heart-o"></i></div>
              </div>
              <div class="product-info">
                <div class="product-name">时尚链条斜挎包 百搭款</div>
                <div class="product-price">¥259</div>
                <div class="product-rating">
                  <span class="rating-stars"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-o"></i></span>
                  <span>4.2 (178)</span>
                </div>
              </div>
            </div>
            
            <div class="product-card">
              <div class="product-image" style="background-image: url('https://picsum.photos/id/106/400/400');">
                <div class="product-badge">优惠</div>
                <div class="product-favorite"><i class="fa fa-heart-o"></i></div>
              </div>
              <div class="product-info">
                <div class="product-name">夏季凉鞋 百搭舒适</div>
                <div class="product-price">¥129</div>
                <div class="product-rating">
                  <span class="rating-stars"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa fa-star-half-o"></i><i class="fa fa-star-o"></i></span>
                  <span>3.7 (96)</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 列表视图商品列表 -->
        <div class="product-view" id="listView2" style="display: none;">
          <div class="products-list">
            <div class="product-list-item">
              <div class="product-list-image" style="background-image: url('https://picsum.photos/id/64/400/400');"></div>
              <div class="product-list-info">
                <div class="product-list-name">夏季碎花连衣裙 收腰显瘦</div>
                <div class="product-list-desc">轻盈透气气面料，修身设计，多种花色，适合各种场合穿着</div>
                <div class="product-list-footer">
                  <div class="product-list-price">¥159</div>
                  <button class="product-list-action">加入购物车</button>
                </div>
              </div>
            </div>
            
            <div class="product-list-item">
              <div class="product-list-image" style="background-image: url('https://picsum.photos/id/21/400/400');"></div>
              <div class="product-list-info">
                <div class="product-list-name">滋润口红套装 多色组合</div>
                <div class="product-list-desc">持久保湿，不易脱色，6色组合，适合不同妆容和场合</div>
                <div class="product-list-footer">
                  <div class="product-list-price">¥199</div>
                  <button class="product-list-action">加入购物车</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="bottom-nav">
        <a href="#" class="nav-item">
          <i class="fa fa-home"></i>
          <span>首页</span>
        </a>
        <a href="#" class="nav-item active">
          <i class="fa fa-shopping-bag"></i>
          <span>商品</span>
        </a>
        <a href="#" class="nav-item">
          <i class="fa fa-plus-square-square-o"></i>
          <span>发布</span>
        </a>
        <a href="#" class="nav-item">
          <i class="fa fa-bell-o"></i>
          <span>通知</span>
        </a>
        <a href="#" class="nav-item">
          <i class="fa fa-user-o"></i>
          <span>我的</span>
        </a>
      </div>
    </div>
    
    <!-- 风格3：生态绿商品商品列表 -->
    <div class="products-page" id="products3">
      <div class="page-header">
        <h1 class="page-title">环保商品</h1>
        <div class="header-actions">
          <button class="header-btn" id="filter3"><i class="fa fa-filter"></i></button>
          <button class="header-btn" id="cart3"><i class="fa fa-shopping-cart"></i></button>
        </div>
      </div>
      
      <div class="search-bar">
        <i class="fa fa-search search-icon"></i>
        <input type="text" class="search-input" placeholder="搜索环保商品...">
      </div>
      
      <div class="category-tabs">
        <div class="category-tab active">全部</div>
        <div class="category-tab">家居用品</div>
        <div class="category-tab">个人护理品</div>
        <div class="category-tab">食品</div>
        <div class="category-tab">服饰</div>
        <div class="category-tab">清洁</div>
      </div>
      
      <div class="content-container">
        <!-- 网格视图商品列表 -->
        <div class="product-view active" id="gridView3">
          <div class="products-grid">
            <div class="product-card">
              <div class="product-image" style="background-image: url('https://picsum.photos/id/131/400/400');">
                <div class="product-badge">有机</div>
                <div class="product-favorite"><i class="fa fa-heart-o"></i></div>
              </div>
              <div class="product-info">
                <div class="product-name">竹制餐具套装 便携环保</div>
                <div class="product-price">¥79</div>
                <div class="product-rating">
                  <span class="rating-stars"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-half-o"></i></span>
                  <span>4.5 (216)</span>
                </div>
              </div>
            </div>
            
            <div class="product-card">
              <div class="product-image" style="background-image: url('https://picsum.photos/id/106/400/400');">
                <div class="product-favorite"><i class="fa fa-heart-o"></i></div>
              </div>
              <div class="product-info">
                <div class="product-name">有机棉T恤 天然染料</div>
                <div class="product-price">¥129</div>
                <div class="product-rating">
                  <span class="rating-stars"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-o"></i></span>
                  <span>4.1 (156)</span>
                </div>
              </div>
            </div>
            
            <div class="product-card">
              <div class="product-image" style="background-image: url('https://picsum.photos/id/96/400/400');">
                <div class="product-badge">可降解</div>
                <div class="product-favorite"><i class="fa fa-heart-o"></i></div>
              </div>
              <div class="product-info">
                <div class="product-name">竹纤维毛巾 柔软吸水</div>
                <div class="product-price">¥49</div>
                <div class="product-rating">
                  <span class="rating-stars"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></span>
                  <span>4.9 (324)</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 列表视图商品列表 -->
        <div class="product-view" id="listView3" style="display: none;">
          <div class="products-list">
            <div class="product-list-item">
              <div class="product-list-image" style="background-image: url('https://picsum.photos/id/131/400/400');"></div>
              <div class="product-list-info">
                <div class="product-list-name">竹制餐具套装 便携环保</div>
                <div class="product-list-desc">天然竹制，包含刀叉勺筷，便携收纳袋，可重复使用，替代一次性餐具</div>
                <div class="product-list-footer">
                  <div class="product-list-price">¥79</div>
                  <button class="product-list-action">加入购物车</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="bottom-nav">
        <a href="#" class="nav-item">
          <i class="fa fa-home"></i>
          <span>首页</span>
        </a>
        <a href="#" class="nav-item active">
          <i class="fa fa-shopping-bag"></i>
          <span>商品</span>
        </a>
        <a href="#" class="nav-item">
          <i class="fa fa-plus-square-o"></i>
          <span>发布</span>
        </a>
        <a href="#" class="nav-item">
          <i class="fa fa-bell-o"></i>
          <span>通知</span>
        </a>
        <a href="#" class="nav-item">
          <i class="fa fa-user-o"></i>
          <span>我的</span>
        </a>
      </div>
    </div>
    
    <!-- 风格4：温暖橙商品列表 (食品为主) -->
    <div class="products-page" id="products4">
      <div class="page-header">
        <h1 class="page-title">美食精选</h1>
        <div class="header-actions">
          <button class="header-btn" id="filter4"><i class="fa fa-filter"></i></button>
          <button class="header-btn" id="cart4"><i class="fa fa-shopping-cart"></i></button>
        </div>
      </div>
      
      <div class="search-bar">
        <i class="fa fa-search search-icon"></i>
        <input type="text" class="search-input" placeholder="搜索美食...">
      </div>
      
      <div class="category-tabs">
        <div class="category-tab active">全部</div>
        <div class="category-tab">零食</div>
        <div class="category-tab">饮品</div>
        <div class="category-tab">生鲜</div>
        <div class="category-tab">粮油</div>
        <div class="category-tab">特产</div>
      </div>
      
      <div class="content-container">
        <!-- 网格视图商品列表 -->
        <div class="product-view active" id="gridView4">
          <div class="products-grid">
            <div class="product-card">
              <div class="product-image" style="background-image: url('https://picsum.photos/id/292/400/400');">
                <div class="product-badge">热销</div>
                <div class="product-favorite"><i class="fa fa-heart-o"></i></div>
              </div>
              <div class="product-info">
                <div class="product-name">进口坚果礼盒 混合装</div>
                <div class="product-price">¥169</div>
                <div class="product-rating">
                  <span class="rating-stars"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-half-o"></i></span>
                  <span>4.7 (528)</span>
                </div>
              </div>
            </div>
            
            <div class="product-card">
              <div class="product-image" style="background-image: url('https://picsum.photos/id/431/400/400');">
                <div class="product-favorite"><i class="fa fa-heart-o"></i></div>
              </div>
              <div class="product-info">
                <div class="product-name">手工巧克力礼盒 多款口味</div>
                <div class="product-price">¥129</div>
                <div class="product-rating">
                  <span class="rating-stars"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></span>
                  <span>4.9 (326)</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 列表视图商品列表 -->
        <div class="product-view" id="listView4" style="display: none;">
          <div class="products-list">
            <div class="product-list-item">
              <div class="product-list-image" style="background-image: url('https://picsum.photos/id/292/400/400');"></div>
              <div class="product-list-info">
                <div class="product-list-name">进口坚果礼盒 混合装</div>
                <div class="product-list-desc">精选全球优质坚果，包含巴旦木、腰果、核桃等，礼盒包装，送礼自用皆宜</div>
                <div class="product-list-footer">
                  <div class="product-list-price">¥169</div>
                  <button class="product-list-action">加入购物车</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="bottom-nav">
        <a href="#" class="nav-item">
          <i class="fa fa-home"></i>
          <span>首页</span>
        </a>
        <a href="#" class="nav-item active">
          <i class="fa fa-shopping-bag"></i>
          <span>商品</span>
        </a>
        <a href="#" class="nav-item">
          <i class="fa fa-plus-square-o"></i>
          <span>发布</span>
        </a>
        <a href="#" class="nav-item">
          <i class="fa fa-bell-o"></i>
          <span>通知</span>
        </a>
        <a href="#" class="nav-item">
          <i class="fa fa-user-o"></i>
          <span>我的</span>
        </a>
      </div>
    </div>
    
    <!-- 风格5：梦幻紫商品列表 (美妆为主) -->
    <div class="products-page" id="products5">
      <div class="page-header">
        <h1 class="page-title">美妆精选</h1>
        <div class="header-actions">
          <button class="header-btn" id="filter5"><i class="fa fa-filter"></i></button>
          <button class="header-btn" id="cart5"><i class="fa fa-shopping-cart"></i></button>
        </div>
      </div>
      
      <div class="search-bar">
        <i class="fa fa-search search-icon"></i>
        <input type="text" class="search-input" placeholder="搜索美妆商品...">
      </div>
      
      <div class="category-tabs">
        <div class="category-tab active">全部</div>
        <div class="category-tab">护肤</div>
        <div class="category-tab">彩妆</div>
        <div class="category-tab">香水</div>
        <div class="category-tab">工具</div>
        <div class="category-tab">套装</div>
      </div>
      
      <div class="content-container">
        <!-- 网格视图商品列表 -->
        <div class="product-view active" id="gridView5">
          <div class="products-grid">
            <div class="product-card">
              <div class="product-image" style="background-image: url('https://picsum.photos/id/99/400/400');">
                <div class="product-badge">热销</div>
                <div class="product-favorite"><i class="fa fa-heart-o"></i></div>
              </div>
              <div class="product-info">
                <div class="product-name">玻尿酸保湿精华液 30ml</div>
                <div class="product-price">¥259</div>
                <div class="product-rating">
                  <span class="rating-stars"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-half-o"></i></span>
                  <span>4.6 (428)</span>
                </div>
              </div>
            </div>
            
            <div class="product-card">
              <div class="product-image" style="background-image: url('https://picsum.photos/id/21/400/400');">
                <div class="product-favorite"><i class="fa fa-heart-o"></i></div>
              </div>
              <div class="product-info">
                <div class="product-name">丝绒哑光眼影盘 12色</div>
                <div class="product-price">¥189</div>
                <div class="product-rating">
                  <span class="rating-stars"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></span>
                  <span>4.9 (632)</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 列表视图商品列表 -->
        <div class="product-view" id="listView5" style="display: none;">
          <div class="products-list">
            <div class="product-list-item">
              <div class="product-list-image" style="background-image: url('https://picsum.photos/id/99/400/400');"></div>
              <div class="product-list-info">
                <div class="product-list-name">玻尿酸保湿精华液 30ml</div>
                <div class="product-list-desc">深层补水，持久保湿，提亮肤色，改善细纹，适合各种肤质</div>
                <div class="product-list-footer">
                  <div class="product-list-price">¥259</div>
                  <button class="product-list-action">加入购物车</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="bottom-nav">
        <a href="#" class="nav-item">
          <i class="fa fa-home"></i>
          <span>首页</span>
        </a>
        <a href="#" class="nav-item active">
          <i class="fa fa-shopping-bag"></i>
          <span>商品</span>
        </a>
        <a href="#" class="nav-item">
          <i class="fa fa-plus-square-o"></i>
          <span>发布</span>
        </a>
        <a href="#" class="nav-item">
          <i class="fa fa-bell-o"></i>
          <span>通知</span>
        </a>
        <a href="#" class="nav-item">
          <i class="fa fa-user-o"></i>
          <span>我的</span>
        </a>
      </div>
    </div>
    
    <!-- 风格6：商务黑商品列表 (电子产品为主) -->
    <div class="products-page" id="products6">
      <div class="page-header">
        <h1 class="page-title">数码精选</h1>
        <div class="header-actions">
          <button class="header-btn" id="filter6"><i class="fa fa-filter"></i></button>
          <button class="header-btn" id="cart6"><i class="fa fa-shopping-cart"></i></button>
        </div>
      </div>
      
      <div class="search-bar">
        <i class="fa fa-search search-icon"></i>
        <input type="text" class="search-input" placeholder="搜索数码产品...">
      </div>
      
      <div class="category-tabs">
        <div class="category-tab active">全部</div>
        <div class="category-tab">手机</div>
        <div class="category-tab">电脑</div>
        <div class="category-tab">配件</div>
        <div class="category-tab">影音</div>
        <div class="category-tab">智能</div>
      </div>
      
      <div class="content-container">
        <!-- 网格视图商品列表 -->
        <div class="product-view active" id="gridView6">
          <div class="products-grid">
            <div class="product-card">
              <div class="product-image" style="background-image: url('https://picsum.photos/id/160/400/400');">
                <div class="product-badge">新品</div>
                <div class="product-favorite"><i class="fa fa-heart-o"></i></div>
              </div>
              <div class="product-info">
                <div class="product-name">超薄笔记本电脑 14英寸</div>
                <div class="product-price">¥5999</div>
                <div class="product-rating">
                  <span class="rating-stars"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-half-o"></i></span>
                  <span>4.7 (156)</span>
                </div>
              </div>
            </div>
            
            <div class="product-card">
              <div class="product-image" style="background-image: url('https://picsum.photos/id/119/400/400');">
                <div class="product-favorite"><i class="fa fa-heart-o"></i></div>
              </div>
              <div class="product-info">
                <div class="product-name">智能手表 全触控 防水</div>
                <div class="product-price">¥899</div>
                <div class="product-rating">
                  <span class="rating-stars"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></span>
                  <span>4.9 (218)</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 列表视图商品列表 -->
        <div class="product-view" id="listView6" style="display: none;">
          <div class="products-list">
            <div class="product-list-item">
              <div class="product-list-image" style="background-image: url('https://picsum.photos/id/160/400/400');"></div>
              <div class="product-list-info">
                <div class="product-list-name">超薄笔记本电脑 14英寸</div>
                <div class="product-list-desc">酷睿i7处理器，16GB内存，512GB SSD，全高清屏幕，轻薄便携，续航持久</div>
                <div class="product-list-footer">
                  <div class="product-list-price">¥5999</div>
                  <button class="product-list-action">加入购物车</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="bottom-nav">
        <a href="#" class="nav-item">
          <i class="fa fa-home"></i>
          <span>首页</span>
        </a>
        <a href="#" class="nav-item active">
          <i class="fa fa-shopping-bag"></i>
          <span>商品</span>
        </a>
        <a href="#" class="nav-item">
          <i class="fa fa-plus-square-o"></i>
          <span>发布</span>
        </a>
        <a href="#" class="nav-item">
          <i class="fa fa-bell-o"></i>
          <span>通知</span>
        </a>
        <a href="#" class="nav-item">
          <i class="fa fa-user-o"></i>
          <span>我的</span>
        </a>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 当前状态
    let currentStyle = 1;
    let currentView = 'grid'; // grid 或 list
    
    // DOM元素
    const switcherToggle = document.querySelector('.switcher-toggle');
    const switcher = document.querySelector('.style-switcher');
    const switcherClose = document.querySelector('.switcher-close');
    const switcherOptions = document.querySelectorAll('.switcher-option');
    const viewToggle = document.getElementById('viewToggle');
    const productsPages = {
      1: document.getElementById('products1'),
      2: document.getElementById('products2'),
      3: document.getElementById('products3'),
      4: document.getElementById('products4'),
      5: document.getElementById('products5'),
      6: document.getElementById('products6')
    };
    const bodyElement = document.body;
    
    // 初始化
    function init() {
      // 初始化所有页面的分类标签切换
      initCategoryTabs();
      
      // 初始化商品收藏按钮
      initFavoriteButtons();
      
      // 初始化底部导航
      initBottomNav();
      
      // 初始化视图切换
      viewToggle.addEventListener('click', toggleView);
      
      // 切换器控制
      switcherToggle.addEventListener('click', toggleSwitcher);
      switcherClose.addEventListener('click', toggleSwitcher);
      
      // 切换样式
      switcherOptions.forEach(option => {
        option.addEventListener('click', function() {
          const style = parseInt(this.getAttribute('data-style'));
          switchStyle(style);
          toggleSwitcher();
        });
      });
      
      // 键盘导航切换样式
      document.addEventListener('keydown', function(e) {
        if (e.key === 'ArrowLeft') {
          let prev = currentStyle - 1;
          if (prev < 1) prev = 6;
          switchStyle(prev);
        } else if (e.key === 'ArrowRight') {
          let next = currentStyle + 1;
          if (next > 6) next = 1;
          switchStyle(next);
        }
      });
    }
    
    // 初始化分类标签切换
    function initCategoryTabs() {
      // 为每个页面初始化分类标签
      for (let i = 1; i <= 6; i++) {
        const categoryTabs = productsPages[i].querySelectorAll('.category-tab');
        
        categoryTabs.forEach(tab => {
          tab.addEventListener('click', function() {
            // 移除所有标签的active类
            this.parentElement.querySelectorAll('.category-tab').forEach(item => {
              item.classList.remove('active');
            });
            
            // 激活当前标签
            this.classList.add('active');
          });
        });
      }
    }
    
    // 初始化商品收藏按钮
    function initFavoriteButtons() {
      document.querySelectorAll('.product-favorite').forEach(btn => {
        btn.addEventListener('click', function() {
          const icon = this.querySelector('i');
          
          if (icon.classList.contains('fa-heart-o')) {
            icon.classList.remove('fa-heart-o');
            icon.classList.add('fa-heart');
            this.classList.add('active');
          } else {
            icon.classList.remove('fa-heart');
            icon.classList.add('fa-heart-o');
            this.classList.remove('active');
          }
        });
      });
    }
    
    // 初始化底部导航
    function initBottomNav() {
      // 为每个页面初始化底部导航
      for (let i = 1; i <= 6; i++) {
        const navItems = productsPages[i].querySelectorAll('.nav-item');
        
        navItems.forEach(item => {
          item.addEventListener('click', function(e) {
            e.preventDefault();
            
            // 移除所有导航项的active类
            this.closest('.bottom-nav').querySelectorAll('.nav-item').forEach(nav => {
              nav.classList.remove('active');
            });
            
            // 激活当前导航项
            this.classList.add('active');
          });
        });
      }
    }
    
    // 切换视图（网格/列表）
    function toggleView() {
      const icon = viewToggle.querySelector('i');
      
      if (currentView === 'grid') {
        // 切换到列表视图
        currentView = 'list';
        icon.classList.remove('fa-th-list');
        icon.classList.add('fa-th-large');
        
        // 隐藏所有网格视图，显示列表视图
        for (let i = 1; i <= 6; i++) {
          document.getElementById(`gridView${i}`).style.display = 'none';
          document.getElementById(`listView${i}`).style.display = 'block';
        }
      } else {
        // 切换到网格视图
        currentView = 'grid';
        icon.classList.remove('fa-th-large');
        icon.classList.add('fa-th-list');
        
        // 隐藏所有列表视图，显示网格视图
        for (let i = 1; i <= 6; i++) {
          document.getElementById(`listView${i}`).style.display = 'none';
          document.getElementById(`gridView${i}`).style.display = 'block';
        }
      }
    }
    
    // 切换样式选择器显示/隐藏
    function toggleSwitcher() {
      switcher.classList.toggle('hidden');
    }
    
    // 关闭所有页面
    function closeAllPages() {
      Object.values(productsPages).forEach(page => {
        page.classList.remove('active');
      });
    }
    
    // 切换样式
    function switchStyle(style) {
      // 移除所有样式类
      bodyElement.classList.remove('style-1', 'style-2', 'style-3', 'style-4', 'style-5', 'style-6');
      
      // 添加当前样式类
      bodyElement.classList.add(`style-${style}`);
      
      // 更新当前样式
      currentStyle = style;
      
      // 更新切换器选中状态
      switcherOptions.forEach(option => {
        option.classList.remove('active');
        if (parseInt(option.getAttribute('data-style')) === style) {
          option.classList.add('active');
        }
      });
      
      // 显示对应页面
      closeAllPages();
      productsPages[style].classList.add('active');
      
      // 确保视图状态正确
      if (currentView === 'grid') {
        document.getElementById(`listView${style}`).style.display = 'none';
        document.getElementById(`gridView${style}`).style.display = 'block';
      } else {
        document.getElementById(`gridView${style}`).style.display = 'none';
        document.getElementById(`listView${style}`).style.display = 'block';
      }
    }
    
    // 启动
    init();
  </script>
</body>
</html>
